<template>
	<div class="storage-location-container base-page-container">
		<!-- 搜索区域 -->
		<common-search v-model="searchForm" :search-items="searchItemsConfig" @search="handleSearch"
			@reset="fetchTableData">
		</common-search>

		<!-- 操作按钮区域 -->
		<action-buttons :selected-data="selectedRows" :action-permissions="actionPermissions" add-type="success" :export-type="themeType"
			:import-type="themeType" :enable-type="themeType" :disable-type="themeType" @add="handleAdd"
			@export="handleExport" @import="handleImport" @enable="handleEnable" @disable="handleDisable" />

		<!-- 表格区域 -->
		<custom-table
			:data="tableData"
			:columns="tableColumns"
			:loading="tableLoading"
			:current-page="pagination.currentPage"
			:page-size="pagination.pageSize"
			:total="pagination.total"
			table-id="storage-location-table"
			@selection-change="handleSelectionChange"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
			<!-- 库区类型列的自定义插槽 -->
			<template #areaType="{ row }">
				<el-tag :type="getAreaTypeTagType(row.areaType)">
					{{ row.areaType }}
				</el-tag>
			</template>
			
			<!-- 货架类型列的自定义插槽 -->
			<template #shelfType="{ row }">
				<el-tag :type="getShelfTypeTagType(row.shelfType)">
					{{ row.shelfType }}
				</el-tag>
			</template>
			
			<!-- 货位类型列的自定义插槽 -->
			<template #locationType="{ row }">
				<el-tag :type="getLocationTypeTagType(row.locationType)">
					{{ row.locationType }}
				</el-tag>
			</template>
			
			<!-- 是否列的自定义插槽 -->
			<template #isAllowed="{ row }">
				<span>{{ row.isAllowed ? '是' : '否' }}</span>
			</template>
			
			<!-- 操作列 -->
			<template #operation="{ row }">
				<theme-button v-if="tablePermissions.edit" link @click="handleEdit(row)">编辑</theme-button>
				<theme-button v-if="tablePermissions.view" link @click="handleView(row)">查看</theme-button>
			</template>
		</custom-table>	

		<!-- 货位信息弹窗 -->
		<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增货位' : '编辑货位'" width="750px"
			destroy-on-close class="base-dialog" :close-on-click-modal="false">
			<el-form ref="locationFormRef" :model="locationForm" :rules="locationFormRules" label-width="120px"
				class="base-form">
				<div class="form-row">
					<el-form-item label="货位名称" prop="locationName" required>
						<el-input v-model="locationForm.locationName" placeholder="请输入货位名称"></el-input>
					</el-form-item>
					<el-form-item label="使用方式" prop="usageType" required>
						<el-select v-model="locationForm.usageType" placeholder="请选择使用方式" style="width: 100%" @change="handleUsageTypeChange">
							<el-option label="地堆" value="地堆"></el-option>
							<el-option label="货架" value="货架"></el-option>
						</el-select>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="库区类型" prop="areaType" required>
						<el-select v-model="locationForm.areaType" placeholder="请选择库区类型" style="width: 100%" @change="handleAreaTypeChange">
							<el-option label="存储区" value="存储区"></el-option>
							<el-option label="拣货区" value="拣货区"></el-option>
							<el-option label="暂存区" value="暂存区"></el-option>
							<el-option label="次品区" value="次品区"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="库区名称" prop="areaName" required>
						<el-select v-model="locationForm.areaName" placeholder="请选择库区名称" style="width: 100%" @change="handleAreaNameChange">
							<el-option 
								v-for="item in areaOptions" 
								:key="item.value" 
								:label="item.label" 
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="货位类型" prop="locationType" required>
						<el-select v-model="locationForm.locationType" placeholder="请选择货位类型" style="width: 100%">
							<el-option label="存储货位" value="存储货位"></el-option>
							<el-option label="拣货货位" value="拣货货位"></el-option>
							<el-option label="暂存货位" value="暂存货位"></el-option>
							<el-option label="次品货位" value="次品货位"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="通道名称" prop="channelName">
						<el-select v-model="locationForm.channelName" placeholder="请选择通道" style="width: 100%" @change="handleChannelChange">
							<el-option 
								v-for="item in channelOptions" 
								:key="item.value" 
								:label="item.label" 
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="货架类型" prop="shelfType" required>
						<el-select v-model="locationForm.shelfType" placeholder="请选择货架类型" style="width: 100%" :disabled="locationForm.usageType === '地堆'" @change="handleShelfTypeChange">
							<el-option label="存储货架" value="存储货架"></el-option>
							<el-option label="拣货货架" value="拣货货架"></el-option>
							<el-option label="暂存货架" value="暂存货架"></el-option>
							<el-option label="次品货架" value="次品货架"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="货架名称" prop="shelfName">
						<el-select v-model="locationForm.shelfName" placeholder="请选择货架" style="width: 100%" :disabled="locationForm.usageType === '地堆'">
							<el-option 
								v-for="item in shelfOptions" 
								:key="item.value" 
								:label="item.label" 
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="层" prop="layer">
						<el-input v-model.number="locationForm.layer" placeholder="请输入层" type="number" :disabled="!locationForm.shelfName"></el-input>
					</el-form-item>
					<el-form-item label="位" prop="position">
						<el-input v-model.number="locationForm.position" placeholder="请输入位" type="number" :disabled="!locationForm.shelfName"></el-input>
					</el-form-item>
				</div>

				<div class="section-title">货位信息</div>

				<div class="form-row">
					<el-form-item label="优先商品" prop="priorityProduct">
						<el-select v-model="locationForm.priorityProduct" placeholder="请选择优先商品" style="width: 100%" multiple filterable>
							<el-option 
								v-for="item in productOptions" 
								:key="item.value" 
								:label="item.label" 
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="优先级" prop="locationLevel">
						<el-input v-model.number="locationForm.locationLevel" placeholder="请输入优先级" type="number"></el-input>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="指定货主" prop="specifiedOwner">
						<el-select v-model="locationForm.specifiedOwner" placeholder="请选择指定货主" style="width: 100%" multiple filterable>
							<el-option 
								v-for="item in ownerOptions" 
								:key="item.value" 
								:label="item.label" 
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="存储数量上限" prop="numberLimit">
						<el-input v-model.number="locationForm.numberLimit" placeholder="请输入存储数量上限" type="number"></el-input>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="体积(m³)" prop="totalVolume">
						<el-input v-model.number="locationForm.totalVolume" placeholder="请输入体积" type="number"></el-input>
					</el-form-item>
					<el-form-item label="重量(kg)" prop="totalWeight">
						<el-input v-model.number="locationForm.totalWeight" placeholder="请输入重量" type="number"></el-input>
					</el-form-item>
				</div>

				<div class="form-row">
					<el-form-item label="长(cm)" prop="length">
						<el-input v-model.number="locationForm.length" placeholder="请输入长度" type="number"></el-input>
					</el-form-item>
					<el-form-item label="宽(cm)" prop="width">
						<el-input v-model.number="locationForm.width" placeholder="请输入宽度" type="number"></el-input>
					</el-form-item>
				</div>

				<div class="form-row" style="width: 48%">
					<el-form-item label="高(cm)" prop="height">
						<el-input v-model.number="locationForm.height" placeholder="请输入高度" type="number"></el-input>
					</el-form-item>
				</div>

				<div class="section-title">货位策略</div>

				<div class="form-row strategy-row">
					<el-checkbox v-model="locationForm.allowMixProduct" label="允许商品混放"></el-checkbox>
					<el-checkbox v-model="locationForm.allowMixBatch" label="允许批次混放"></el-checkbox>
					<el-checkbox v-model="locationForm.allowMixOwner" label="允许货主混放"></el-checkbox>
					<el-checkbox v-model="locationForm.autoReleaseWhenEmpty" label="0库存自动释放货位"></el-checkbox>
				</div>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">确定</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 日志弹窗 -->
		<log-dialog
			v-model:visible="logDialogVisible"
			:log-data="logData"
			:total="logPagination.total"
			:current-page="logPagination.currentPage"
			:page-size="logPagination.pageSize"
			@size-change="handleLogSizeChange"
			@current-change="handleLogCurrentChange"
		/>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		useTheme
	} from '@/hooks/useTheme'
	import {
		RegionCascader
	} from '@/components/common'
	import { Delete, Plus } from '@element-plus/icons-vue'

	// 使用主题组合API
	const {
		themeType
	} = useTheme()

	// 判断是否开发环境
	const isDevelopment = computed(() => {
		return import.meta.env.MODE === 'development'
	})

	// 搜索项配置列表
	const searchItemsConfig = [{
			label: '货位名称',
			prop: 'locationName',
			type: 'el-input',
			placeholder: '请输入货位名称',
			defaultVisible: true
		},
		{
			label: '货架类型',
			prop: 'shelfType',
			type: 'el-select',
			placeholder: '请选择货架类型',
			defaultVisible: true,
			multiple: true,
			collapseTags: true,
			collapseTagsTooltip: true,
			options: [
				{
					label: '存储货架',
					value: '存储货架'
				},
				{
					label: '拣货货架',
					value: '拣货货架'
				},
				{
					label: '暂存货架',
					value: '暂存货架'
				},
				{
					label: '次品货架',
					value: '次品货架'
				}
			]
		},
		{
			label: '货架名称',
			prop: 'shelfName',
			type: 'el-input',
			placeholder: '请输入货架名称',
			defaultVisible: true
		},
		{
			label: '货位类型',
			prop: 'locationType',
			type: 'el-select',
			placeholder: '请选择货位类型',
			defaultVisible: true,
			multiple: true,
			collapseTags: true,
			collapseTagsTooltip: true,
			options: [
				{
					label: '存储货位',
					value: '存储货位'
				},
				{
					label: '拣货货位',
					value: '拣货货位'
				},
				{
					label: '暂存货位',
					value: '暂存货位'
				},
				{
					label: '次品货位',
					value: '次品货位'
				}
			]
		},
		{
			label: '使用方式',
			prop: 'usageType',
			type: 'el-select',
			placeholder: '请选择使用方式',
			defaultVisible: false,
			options: [
				{
					label: '请选择使用方式',
					value: ''
				},
				{
					label: '地堆',
					value: '地堆'
				},
				{
					label: '货架',
					value: '货架'
				}
			]
		},
		{
			label: '库区类型',
			prop: 'areaType',
			type: 'el-select',
			placeholder: '请选择库区类型',
			defaultVisible: false,
			multiple: true,
			collapseTags: true,
			collapseTagsTooltip: true,
			options: [
				{
					label: '存储库区',
					value: '存储库区'
				},
				{
					label: '拣货库区',
					value: '拣货库区'
				},
				{
					label: '暂存库区',
					value: '暂存库区'
				},
				{
					label: '次品库区',
					value: '次品库区'
				}
			]
		},
		{
			label: '优先商品',
			prop: 'priorityProduct',
			type: 'el-input',
			placeholder: '请输入商品名称',
			defaultVisible: false
		}
	]

	// 操作按钮权限
	const actionPermissions = ref({
		add: true,
		export: false,
		import: false,
		enable:false,
		disable:false,
		viewLog:true,
		delete:true
	})

	// 表格操作权限
	const tablePermissions = ref({
		edit: true,
		view: true
	})

	// 搜索表单数据
	const searchForm = reactive({
		locationName: '',
		shelfType: [],
		shelfName: '',
		locationType: [],
		usageType: '',
		areaType: [],
		priorityProduct: ''
	})

	// 表格数据相关
	const tableData = ref([])
	const tableLoading = ref(false)
	const selectedRows = ref([])

	// 分页相关
	const pagination = reactive({
		currentPage: 1,
		pageSize: 10,
		total: 0
	})

	// 货位表单相关
	const locationFormRef = ref(null)
	const dialogVisible = ref(false)
	const dialogType = ref('add') // 'add' 或 'edit'
	const locationForm = reactive({
		id: '',
		locationName: '',
		usageType: '',
		areaType: '',
		areaName: '',
		locationType: '',
		channelName: '',
		shelfType: '',
		shelfName: '',
		layer: '',
		position: '',
		priorityProduct: [],
		locationLevel: 1,
		specifiedOwner: [],
		numberLimit: '',
		totalVolume: '',
		totalWeight: '',
		length: '',
		width: '',
		height: '',
		allowMixProduct: false,
		allowMixBatch: false,
		allowMixOwner: false,
		autoReleaseWhenEmpty: false
	})

	// 区域选项
	const areaOptions = ref([])
	// 通道选项
	const channelOptions = ref([])
	// 货架选项
	const shelfOptions = ref([])
	// 商品选项
	const productOptions = ref([
		{ label: '商品A', value: '商品A' },
		{ label: '商品B', value: '商品B' },
		{ label: '商品C', value: '商品C' }
	])
	// 货主选项
	const ownerOptions = ref([
		{ label: '货主A', value: '货主A' },
		{ label: '货主B', value: '货主B' },
		{ label: '货主C', value: '货主C' }
	])

	// 表单校验规则
	const locationFormRules = {
		locationName: [{
			required: true,
			message: '请输入货位名称',
			trigger: 'blur'
		}],
		areaType: [{
			required: true,
			message: '请选择库区类型',
			trigger: 'change'
		}],
		areaName: [{
			required: true,
			message: '请选择库区名称',
			trigger: 'change'
		}],
		usageType: [{
			required: true,
			message: '请选择使用方式',
			trigger: 'change'
		}],
		locationType: [{
			required: true,
			message: '请选择货位类型',
			trigger: 'change'
		}],
		shelfType: [{
			required: true,
			message: '请选择货架类型',
			trigger: 'change'
		}],
		locationLevel: [{
			type: 'number',
			message: '优先级必须为数字',
			trigger: 'blur'
		}],
		layer: [{
			type: 'number',
			message: '层必须为数字',
			trigger: 'blur'
		}],
		position: [{
			type: 'number',
			message: '位必须为数字',
			trigger: 'blur'
		}],
		numberLimit: [{
			type: 'number',
			message: '数量上限必须为数字',
			trigger: 'blur'
		}],
		totalVolume: [{
			type: 'number',
			message: '体积必须为数字',
			trigger: 'blur'
		}],
		totalWeight: [{
			type: 'number',
			message: '重量必须为数字',
			trigger: 'blur'
		}],
		length: [{
			type: 'number',
			message: '长度必须为数字',
			trigger: 'blur'
		}],
		width: [{
			type: 'number',
			message: '宽度必须为数字',
			trigger: 'blur'
		}],
		height: [{
			type: 'number',
			message: '高度必须为数字',
			trigger: 'blur'
		}]
	}

	// 日志弹窗相关
	const logDialogVisible = ref(false)
	const logData = ref([])
	const logPagination = reactive({
		currentPage: 1,
		pageSize: 10,
		total: 0
	})

	// 获取库区类型对应的标签类型
	const getAreaTypeTagType = (areaType) => {
		switch (areaType) {
			case '存储区':
				return 'success'
			case '拣货区':
				return 'warning'
			case '暂存区':
				return 'info'
			case '次品区':
				return 'danger'
			default:
				return ''
		}
	}

	// 表格列配置
	const tableColumns = ref([
		{ prop: 'locationName', label: '货位名称', width: '120', minWidth: '120', visible: true },
		{ prop: 'areaType', label: '库区类型', width: '100', minWidth: '100', visible: true, slot: true },
		{ prop: 'shelfType', label: '货架类型', width: '100', minWidth: '100', visible: true, slot: true },
		{ prop: 'locationType', label: '货位类型', width: '100', minWidth: '100', visible: true, slot: true },
		{ prop: 'usageType', label: '使用方式', width: '100', minWidth: '100', visible: true },
		{ prop: 'channelName', label: '通道名称', width: '120', minWidth: '120', visible: true },
		{ prop: 'shelfName', label: '货架名称', width: '120', minWidth: '120', visible: true },
		{ prop: 'layer', label: '层', width: '80', minWidth: '80', visible: true },
		{ prop: 'position', label: '位', width: '80', minWidth: '80', visible: true },
		{ prop: 'totalVolume', label: '货位体积(m³)', width: '120', minWidth: '120', visible: true },
		{ prop: 'usedVolume', label: '已用体积(m³)', width: '120', minWidth: '120', visible: true },
		{ prop: 'totalWeight', label: '货位重量(kg)', width: '120', minWidth: '120', visible: true },
		{ prop: 'usedWeight', label: '已用重量(kg)', width: '120', minWidth: '120', visible: true },
		{ prop: 'priorityProduct', label: '优先商品', width: '150', minWidth: '150', visible: true },
		{ prop: 'locationLevel', label: '货位优先级', width: '120', minWidth: '120', visible: true },
		{ prop: 'productDescription', label: '商品名称描述', width: '170', minWidth: '170', visible: true },
		{ prop: 'batchIsTransfer', label: '批次是否自动转移', width: '140', minWidth: '140', visible: true },
		{ prop: 'locationIsTransfer', label: '货主是否转移', width: '130', minWidth: '130', visible: true },
		{ prop: 'ownerIsTransfer', label: '批次是否转移', width: '130', minWidth: '130', visible: true },
		{ prop: 'numberLimit', label: '数量上限', width: '100', minWidth: '100', visible: true },
		{ prop: 'isAutoTransfer', label: '0库存自动转移', width: '130', minWidth: '130', visible: true },
		{ prop: 'createdBy', label: '创建人', width: '100', minWidth: '100', visible: true },
		{ prop: 'createdTime', label: '创建时间', width: '160', minWidth: '160', visible: true },
		{ prop: 'updatedBy', label: '修改人', width: '100', minWidth: '100', visible: true },
		{ prop: 'updatedTime', label: '修改时间', width: '160', minWidth: '160', visible: true },
		{ prop: 'operation', label: '操作', width: '160', minWidth: '160', fixed: 'right', visible: true }
	])

	// 获取表格数据
	const fetchTableData = async () => {
		tableLoading.value = true

		try {
			// 模拟异步请求
			if (isDevelopment.value) {
				setTimeout(() => {
					// 模拟数据
					tableData.value = [
						{
							id: '1',
							locationName: 'A01-01-01',
							areaType: '拣货区',
							shelfType: '拣货货架',
							locationType: '拣货货位',
							usageType: '货架',
							channelName: '1通道',
							shelfName: '01',
							layer: '1',
							position: '1',
							totalVolume: '2',
							usedVolume: '0',
							totalWeight: '100',
							usedWeight: '5',
							priorityProduct: 'A商品，B商品',
							locationLevel: '1',
							productDescription: '否',
							batchIsTransfer: '否',
							locationIsTransfer: '否',
							ownerIsTransfer: '否',
							numberLimit: '100',
							isAutoTransfer: '否',
							createdBy: '小李',
							createdTime: '2024-11-02 10:23:10',
							updatedBy: '小李', 
							updatedTime: '2024-11-02 10:23:10'
						},
						{
							id: '2',
							locationName: 'A01-01-02',
							areaType: '拣货区',
							shelfType: '拣货货架',
							locationType: '拣货货位',
							usageType: '货架',
							channelName: '1通道',
							shelfName: '01',
							layer: '1',
							position: '2',
							totalVolume: '2',
							usedVolume: '0',
							totalWeight: '100',
							usedWeight: '5',
							priorityProduct: 'A商品',
							locationLevel: '1',
							productDescription: '否',
							batchIsTransfer: '否',
							locationIsTransfer: '否',
							ownerIsTransfer: '否',
							numberLimit: '100',
							isAutoTransfer: '否',
							createdBy: '小李',
							createdTime: '2024-11-01 20:03:27',
							updatedBy: '小李',
							updatedTime: '2024-11-01 20:03:27'
						},
						{
							id: '3',
							locationName: 'A01-01-03',
							areaType: '拣货区',
							shelfType: '拣货货架',
							locationType: '拣货货位',
							usageType: '货架',
							channelName: '1通道',
							shelfName: '01',
							layer: '1',
							position: '3',
							totalVolume: '2',
							usedVolume: '0',
							totalWeight: '100',
							usedWeight: '5',
							priorityProduct: 'A商品',
							locationLevel: '1',
							productDescription: '否',
							batchIsTransfer: '否',
							locationIsTransfer: '否',
							ownerIsTransfer: '否',
							numberLimit: '100',
							isAutoTransfer: '否',
							createdBy: '小李',
							createdTime: '2024-10-20 17:47:10',
							updatedBy: '小李',
							updatedTime: '2024-10-20 17:47:10'
						},
						{
							id: '4',
							locationName: 'A01-01-04',
							areaType: '拣货区',
							shelfType: '拣货货架',
							locationType: '拣货货位',
							usageType: '货架',
							channelName: '1通道',
							shelfName: '01',
							layer: '1',
							position: '4',
							totalVolume: '2',
							usedVolume: '1',
							totalWeight: '100',
							usedWeight: '5',
							priorityProduct: 'A商品',
							locationLevel: '1',
							productDescription: '否',
							batchIsTransfer: '否',
							locationIsTransfer: '否',
							ownerIsTransfer: '否',
							numberLimit: '100',
							isAutoTransfer: '否',
							createdBy: '小李',
							createdTime: '2024-10-20 17:46:17',
							updatedBy: '小李',
							updatedTime: '2024-10-20 17:46:17'
						},
						{
							id: '5',
							locationName: 'A01-01-05',
							areaType: '拣货区',
							shelfType: '拣货货架',
							locationType: '拣货货位',
							usageType: '货架',
							channelName: '1通道',
							shelfName: '01',
							layer: '1',
							position: '5',
							totalVolume: '2',
							usedVolume: '1',
							totalWeight: '100',
							usedWeight: '5',
							priorityProduct: 'A商品',
							locationLevel: '1',
							productDescription: '是',
							batchIsTransfer: '是',
							locationIsTransfer: '是',
							ownerIsTransfer: '是',
							numberLimit: '100',
							isAutoTransfer: '是',
							createdBy: '小李',
							createdTime: '2024-10-20 17:45:42',
							updatedBy: '小李',
							updatedTime: '2024-10-20 17:45:42'
						}
					]

					pagination.total = 120 // 模拟总数据量
					tableLoading.value = false
				}, 500)
			} else {
				// 实际环境API调用
				// const res = await api.getStorageLocationList({
				//   page: pagination.currentPage,
				//   pageSize: pagination.pageSize,
				//   ...searchForm
				// })
				// tableData.value = res.data.list
				// pagination.total = res.data.total
				tableLoading.value = false
			}
		} catch (error) {
			console.error('获取货位列表失败', error)
			tableLoading.value = false
		}
	}

	// 处理分页大小变化
	const handleSizeChange = (size) => {
		pagination.pageSize = size
		fetchTableData()
	}

	// 处理当前页变化
	const handleCurrentChange = (page) => {
		pagination.currentPage = page
		fetchTableData()
	}

	// 处理表格选择事件
	const handleSelectionChange = (rows) => {
		selectedRows.value = rows
	}

	// 处理搜索
	const handleSearch = () => {
		pagination.currentPage = 1
		// 处理搜索条件，构建API请求参数
		const params = { ...searchForm }
		console.log('搜索参数:', params)
		// 调用获取数据函数
		fetchTableData()
	}

	// 处理添加货位
	const handleAdd = () => {
		dialogType.value = 'add'
		dialogVisible.value = true
		// 清空表单
		Object.keys(locationForm).forEach(key => {
			if (key === 'locationLevel') {
				locationForm[key] = 1
			} else if (key === 'priorityProduct') {
				locationForm[key] = []
			} else if (key === 'specifiedOwner') {
				locationForm[key] = []
			} else if (key === 'allowMixProduct' || key === 'allowMixBatch' || 
					key === 'allowMixOwner' || key === 'autoReleaseWhenEmpty') {
				locationForm[key] = false
			} else {
				locationForm[key] = ''
			}
		})
		
		// 清空选项
		areaOptions.value = []
		channelOptions.value = []
		shelfOptions.value = []
	}

	// 处理编辑货位
	const handleEdit = (row) => {
		dialogType.value = 'edit'
		dialogVisible.value = true

		// 填充表单数据
		Object.keys(locationForm).forEach(key => {
			locationForm[key] = row[key] || ''
		})
	}

	// 处理查看货位
	const handleView = (row) => {
		// 实现查看逻辑...
		console.log('查看货位', row)
	}

	// 处理日志
	const handleLog = (row) => {
		logDialogVisible.value = true

		// 模拟日志数据
		setTimeout(() => {
			logData.value = [{
					operateTime: '2024-01-05 14:30:25',
					operator: '小李',
					operateContent: `修改了货位 ${row.name} 的通道信息`
				},
				{
					operateTime: '2023-12-20 09:15:36',
					operator: '小王',
					operateContent: `修改了货位 ${row.name} 的面积信息`
				},
				{
					operateTime: '2023-11-15 16:42:10',
					operator: '小张',
					operateContent: `创建了货位 ${row.name}`
				}
			]
			logPagination.total = 3
		}, 300)
	}

	// 处理日志分页变化
	const handleLogSizeChange = (size) => {
		logPagination.pageSize = size
		// 重新获取日志数据
	}

	const handleLogCurrentChange = (page) => {
		logPagination.currentPage = page
		// 重新获取日志数据
	}

	// 处理导出
	const handleExport = () => {
		console.log('导出货位数据')
	}

	// 处理导入
	const handleImport = () => {
		console.log('导入货位数据')
	}

	// 处理启用
	const handleEnable = () => {
		if (selectedRows.value.length === 0) {
			ElMessage.warning('请选择要启用的货位')
			return
		}

		console.log('启用货位', selectedRows.value)
	}

	// 处理停用
	const handleDisable = () => {
		if (selectedRows.value.length === 0) {
			ElMessage.warning('请选择要停用的货位')
			return
		}

		console.log('停用货位', selectedRows.value)
	}

	// 提交表单
	const submitForm = async () => {
		locationFormRef.value.validate(async (valid) => {
			if (valid) {
				// 处理表单数据
				const submitData = { ...locationForm }
				
				console.log('提交表单', submitData)

				try {
					// 模拟提交
					setTimeout(() => {
						ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
						dialogVisible.value = false
						fetchTableData()
					}, 500)
				} catch (error) {
					console.error('提交表单失败', error)
				}
			}
		})
	}

	// 获取货架类型对应的标签类型
	const getShelfTypeTagType = (shelfType) => {
		switch (shelfType) {
			case '存储货架':
				return 'success'
			case '拣货货架':
				return 'warning'
			case '暂存货架':
				return 'info'
			case '次品货架':
				return 'danger'
			default:
				return ''
		}
	}

	// 获取货位类型对应的标签类型
	const getLocationTypeTagType = (locationType) => {
		switch (locationType) {
			case '存储货位':
				return 'success'
			case '拣货货位':
				return 'warning'
			case '暂存货位':
				return 'info'
			case '次品货位':
				return 'danger'
			default:
				return ''
		}
	}

	// 处理使用方式变化
	const handleUsageTypeChange = (val) => {
		if (val === '地堆') {
			locationForm.shelfType = ''
			locationForm.shelfName = ''
			locationForm.layer = ''
			locationForm.position = ''
		}
	}

	// 处理库区类型变化
	const handleAreaTypeChange = (val) => {
		// 清空库区名称
		locationForm.areaName = ''
		
		// 根据库区类型筛选库区
		// 模拟从后端获取数据
		if (val) {
			areaOptions.value = [
				{ label: `${val}A`, value: `${val}A` },
				{ label: `${val}B`, value: `${val}B` },
				{ label: `${val}C`, value: `${val}C` }
			]
			
			// 设置货架类型与库区类型一致
			if (val === '存储区') {
				locationForm.shelfType = '存储货架'
			} else if (val === '拣货区') {
				locationForm.shelfType = '拣货货架'
			} else if (val === '暂存区') {
				locationForm.shelfType = '暂存货架'
			} else if (val === '次品区') {
				locationForm.shelfType = '次品货架'
			}
		} else {
			areaOptions.value = []
		}
	}

	// 处理库区名称变化
	const handleAreaNameChange = (val) => {
		// 清空通道名称
		locationForm.channelName = ''
		
		// 获取选中库区的通道
		if (val) {
			// 模拟从后端获取数据
			channelOptions.value = [
				{ label: `${val}通道1`, value: `${val}通道1` },
				{ label: `${val}通道2`, value: `${val}通道2` },
				{ label: `${val}通道3`, value: `${val}通道3` }
			]
		} else {
			channelOptions.value = []
		}
	}

	// 处理通道变化
	const handleChannelChange = (val) => {
		// 获取选中通道的货架
		if (val && locationForm.shelfType) {
			// 模拟从后端获取数据
			shelfOptions.value = [
				{ label: `${locationForm.shelfType}1`, value: `${locationForm.shelfType}1` },
				{ label: `${locationForm.shelfType}2`, value: `${locationForm.shelfType}2` },
				{ label: `${locationForm.shelfType}3`, value: `${locationForm.shelfType}3` }
			]
		} else {
			shelfOptions.value = []
		}
	}

	// 处理货架类型变化
	const handleShelfTypeChange = (val) => {
		locationForm.shelfName = ''
		
		// 根据货架类型和通道获取货架
		if (val && locationForm.channelName) {
			// 模拟从后端获取数据
			shelfOptions.value = [
				{ label: `${val}1`, value: `${val}1` },
				{ label: `${val}2`, value: `${val}2` },
				{ label: `${val}3`, value: `${val}3` }
			]
		} else if (val) {
			// 如果没有选择通道，但选择了货架类型
			shelfOptions.value = [
				{ label: `${val}A`, value: `${val}A` },
				{ label: `${val}B`, value: `${val}B` },
				{ label: `${val}C`, value: `${val}C` }
			]
		} else {
			shelfOptions.value = []
		}
	}

	// 页面初始化
	onMounted(() => {
		fetchTableData()
	})
</script>

<style lang="scss" scoped>
.channel-container {
	margin-top: 5px;
	border: 1px solid #ebeef5;
	border-radius: 4px;

	.channel-header {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;
		font-weight: bold;

		.header-item {
			&:nth-child(1) {
				flex: 0 0 40px;
				text-align: center;
			}
			&:nth-child(2) {
				flex: 1;
			}
			&:nth-child(3) {
				flex: 0 0 80px;
				text-align: center;
			}
			&:nth-child(4) {
				flex: 0 0 100px;
				text-align: center;
			}
			&:nth-child(5) {
				flex: 0 0 100px;
				text-align: center;
			}
			&:nth-child(6) {
				flex: 0 0 60px;
				text-align: center;
			}
		}
	}

	.channel-body {
		padding: 0 10px;

		.channel-row {
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid #ebeef5;

			.body-item {
				&:nth-child(1) {
					flex: 0 0 40px;
					text-align: center;
				}
				&:nth-child(2) {
					flex: 1;
					padding-right: 10px;
				}
				&:nth-child(3) {
					flex: 0 0 80px;
					padding-right: 10px;
				}
				&:nth-child(4) {
					flex: 0 0 100px;
					padding-right: 10px;
				}
				&:nth-child(5) {
					flex: 0 0 100px;
					padding-right: 10px;
				}
				&:nth-child(6) {
					flex: 0 0 60px;
					text-align: center;
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.channel-footer {
		width: 100%;
		padding: 10px;
		display: flex;
		justify-content: flex-end;
	}
}

.selected-info {
	margin: 10px 0;
	display: flex;
	align-items: center;
	font-size: 14px;
	
	.clear-selected {
		margin-left: 10px;
		color: #409eff;
		cursor: pointer;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ebeef5;
}

.strategy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-left: 60px;
	.el-checkbox {
		margin-right: 20px;
	}
}
</style>